<template>
    <div id="waterInformation">
        <div class="top-tabs" >
           <tools @handleThisDom="thisDom"></tools>
        </div>
        <div class="search-table" > 
          <div class="toggle-tab" @click="toggleShow">
            <template v-if="tableStatus">
              <i class="el-icon-arrow-right"></i>
            </template>
            <template v-else>
              <i class="el-icon-arrow-left"></i>
            </template>
          </div>
          <div class="wrap-table" v-if="tableStatus" >
           <div class="wrap-search">
             <div class="searchObj">
               <span>选择对象:</span>
                <select-tree :waterWorksTree="tree" @showSelectLists="searchObj"></select-tree>
             </div>
             <div class="inner-select">
                <div class="row first">
                  <div class="col ">
                    <span>所属区域:</span>
                    <el-select v-model="areas_item" placeholder="请选择">
                      <el-option
                        v-for="item in areas"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                  <div class="col">
                    <span>用户名称:</span>
                    <el-input
                      placeholder="请输入内容"
                      v-model="inputSomething"
                      clearable>
                    </el-input>
                  </div>
                </div>
              <div class="row last">
                <el-button type="success" @click="search">搜索</el-button>
              </div>
            </div>
           </div>
            <div class="contentLists">
                <div class="content-item  top-head">
                  <div class="ownArea item">
                    <div> 所属区域</div>
                  </div>
                  <div class="userUnit">
                    <div>用户单位</div>
                  </div>
                  <div class="detail item ">
                     <div>详情</div> 
                  </div>
                  <div class="action item">
                    <div>分析</div>
                  </div>
                </div>
                <div class="content-item" v-for="(item,index) in area_users" :key="index" v-if="item.sub_user.length>0">
                  <div class="ownArea item">
                    {{item.area}}
                  </div>
                  <div class="userUnit">
                    <div class="row" v-for="(unit,i) in item.sub_user" :key="i">
                      <i class="el-icon-delete" :class="{ifDel:unit.delflag}" @click="toggleSelect(index,i,unit.ID)"></i>
                      <span class="unitName" :title="unit.name" >{{unit.NAME}}</span>
                    </div>
                  </div>
                  <div class="detail item">
                    <div  v-for="(unit,i) in item.sub_user" :key="i" @click="gotoDetail(item.id,unit.ID,unit.NAME)"><span >详情</span></div>
                  </div>
                  <div class="action item" @click="gotoDetail(item.id,'',item.area)">
                    <span>分析</span>
                  </div>
                </div>
                <div class="pages">
                    <pagenation :noSmall="'true'" :totalPage="totalPage" @thisPage="gotoThisPage"></pagenation>
                </div>
            </div>
          </div>
        </div>
        <del-model :showModel="showDelFlag" :delNum="delId" :type="modelType" @delThis="hiddenDelModel" @sureDelThis="justDel"></del-model>
        <edit-model :showEditModel="showEditFlag" :title="'新增'" @hiddenSelf="hiddenEditModel" @saveUper="saveEditInputs">
          <div class="inputs">
            test
          </div>
        </edit-model>
    </div>
</template>
<script>
import tools from "@/common/components/gis_units/tools";
import DelModel from "@/common/components/poupe/save_status";
import editModel from "@/common/components/poupe/edit";
import pagenation from "@/common/components/pagination";
import selectTree from "@/common/components/selectWithTree";
import { getPipeWaterUserInfo } from "@/api/pipeNet_msg/waterInformation";
import { saveOrUpdate } from "@/api/pipeNet_msg/bagUser_manage";
import * as esriLoader from "esri-loader";
// esriLoader.loadCss(dse.arcgis_themeCss);
esriLoader.loadCss(dse.arcgis_mainCss);
let belowMap = dse.arcgis_belowMap;
let pipeMap = dse.arcgis_pipe;
let ponitsMap = dse.arcgis_points;
let startJs = dse.arcgis_startJS;
const options =  {
  url: startJs,
  dojoConfig: dse.gisConfig
};
export default {
  components: {
    tools,
    pagenation,
    selectTree,
    editModel,
    DelModel
  },
  data() {
    return {
      view: null, // 全局化  gis底图实例
      map: null, //  挂载底图图层
      layer1: null, // 管网图层
      layer2: null, // 消防栓图层
      layer3: null, // 阀门图层
      distance: null, // 量距离
      drawTools: null, //画基本图
      area: null, // 量面积
      small: false,
      tableStatus: true,
      search_str: "", //查询对象 的数值
      areas: [],
      areas_item: "",  // 选择区域id
      searchValue: "", // 查询的名字
      activeFlag: 0,
      inputSomething: "",
      tree: [],
      area_users: [],
      modelType: false, // 显示删除的弹窗
      delList: [], // 要删除的id 数组
      showDelFlag: false, //  开关删除的弹窗
      showEditFlag: false, //开关  编辑的弹窗
      totalPage: 1,
      delId:null, //要删除的ID
      del_areaIndex:null, //要删除的区域索引
      del_userIndex:null, //要删除的用户索引
    };
  },
  methods: {
    createMap() {
      let that = this;
      esriLoader
        .loadModules([
          "esri/Map",
          "esri/views/MapView",
          "esri/layers/FeatureLayer",
          "dse//modules/toolbars/Draw",
          "dse/modules/measure/_measureDistance",
          "dse/modules/measure/_measureArea",
          "dojo/domReady!"
        ],options)
        .then(
          ([
            Map,
            MapView,
            FeatureLayer,
             Draw,
            _measureDistance,
            _measureArea
          ]) => {
            // Create the map
            that.map = new Map({
              basemap: "satellite"
            });
            that.layer1 = new FeatureLayer({ url: belowMap });
            that.map.add(that.layer1);
            that.layer2 = new FeatureLayer({
              url: pipeMap,
              popupTemplate: {
                title: "消防栓",
                content: "这是消防栓的数据"
              },
              outFields: ["*"]
            });
            that.map.add(that.layer2);
            that.layer3 = new FeatureLayer({
              url: ponitsMap,
              popupTemplate: {
                title: "阀门",
                content: "这是阀门的数据"
              },
              outFields: ["*"]
            });
            that.map.add(that.layer3);
            that.view = new MapView({
              container: "waterInformation",
              map: that.map,
              zoom: 15,
              center: [106.290351, 36.001819]
            });
            that.drawTools = new Draw({
              view: that.view
            });
            that.distance = new _measureDistance({
              view: that.view
            });
            that.area = new _measureArea({
              view: that.view
            });
          }
        );
    },
    gotoDetail(areaId, userId, name) {
      this.$router.push({
        name: "infoTable",
        params: { areaId: areaId, userId: userId, title: name }
      });
      this.$store.commit("setAside_status", false);
      this.$emit("hiddenAside");
    },
    toggleShow() {
      this.tableStatus = !this.tableStatus;
      if (this.tableStatus == true && this.timeLine_flag == false) {
        this.timeLine_flag = true;
      } else {
        this.timeLine_flag = false;
      }
    },
   thisDom(obj) {
      let that = this;
      let temp_str = obj.tmpStr;
      switch (temp_str) {
        case "平面":
          that.view.map.basemap = "streets";
          break;
        case "卫星":
          that.view.map.basemap = "satellite";
          break;
        case "地形":
          that.view.map.basemap = "terrain";
          break;
        case "管网":
          that.map.removeAll();
          that.map.add(that.layer1);
          break;
        case "阀门":
          that.map.removeAll();
          that.map.add(that.layer2);
          break;
        case "消防栓":
          that.map.removeAll();
          that.map.add(that.layer3);
          break;
        case "测距":
          that.distance.start();
          break;
        case "测面":
          that.area.start();
          break;
        case "画点":
          that.drawTools.activate("point");
          break;
        case "画面":
          that.drawTools.activate("polygon");
          break;
        case "清除所有":
          that.distance.clear();
          that.area.clear();
          break;
      }
    },
    analysis() {
    },
    searchObj(str) {
      this.search_str = str;
    },
    toggleSelect(index, i, id) {
      // this.area_users[index].sub_user[i].delflag = !this.area_users[index]
      //   .sub_user[i].delflag;
      // if (this.area_users[index].sub_user[i].delflag) {
      //   this.delList.push(id);
      // } else {
      //   if (this.delList.length > 0) {
      //     var index = this.delList.indexOf(id);
      //     if (index > -1) {
      //       this.delList.splice(index, 1);
      //     }
      //   }
      // }

      this.delId = id;
      this.del_areaIndex = index,
      this.del_userIndex = i;
      this.showDelFlag =true;

    },
    showDelModel() {
      let that = this;
      if (that.delList.length == 0) {
        return;
      }
      this.showDelFlag = true;
    },
    hiddenDelModel(val) {
      let that = this;
      this.showDelFlag = val.modelFlag;
    },
    justDel(val) {
      let that = this;
      // let temp_id = val.num;
      // let tepm_ids = val.num[0];
      let temp_delId = this.delId;
      that.sureDel(temp_delId);
    },
    showEditModel() {
      this.showEditFlag = true;
    },
    hiddenEditModel(val) {
      this.showEditFlag = false;
    },
    saveEditInputs(val) {
      this.showEditFlag = false;
      // ajax  保存请求
    },
    getAreaUserList(id,name,areaId,page) {
      let that = this;
      getPipeWaterUserInfo({
        id: ""+id,
        name: ""+name,
        areaId: ""+areaId,
        pageSize: "10",
        page: ""+page
      }).then(res => {
        let data = res.data;
        if (data) {
          let { rows } = data;
          let oldList = [];
          let newArea = [];
          let temp_area = [
            {
              area: "老城区",
              id: "" + that.DSE.area.old,
              sub_user: []
            },
            {
              area: "新城区",
              id: "" + that.DSE.area.new,
              sub_user: []
            },
            {
              area: "开发区",
              id: "" + that.DSE.area.deve,
              sub_user: []
            }
          ];
          let temp_newAreaId = that.DSE.area.new;
          let temp_oldAreaId = that.DSE.area.old;
          let temp_deveAreaId = that.DSE.area.deve;
          for (let i = 0; i < rows.length; i++) {
            if (rows[i].AREA_ID == temp_newAreaId) {
              temp_area[1].sub_user.push(rows[i]);
            } else if (rows[i].AREA_ID == temp_oldAreaId) {
              temp_area[0].sub_user.push(rows[i]);
            } else if (rows[i].AREA_ID == temp_deveAreaId) {
              temp_area[2].sub_user.push(rows[i]);
            }
          }
          that.area_users = temp_area;
          let { total } = data;
          if (total) {
            that.totalPage = Math.ceil(parseInt(total) / 10);
          }
        }
      });
    },
    sureDel(id) {
      let that = this;
      saveOrUpdate({
        id: "" + id,
        status: "3"
      }).then(res => {
         let temp_areaIndex =that.del_areaIndex;
          let temp_userIndex = that.temp_userIndex;
        if(res.status){
          that.showDelFlag = false;
           that.area_users[temp_areaIndex].sub_user.splice(temp_userIndex,1);
        }
      });
    },
    gotoThisPage(val){
      let temp_page = val+"";
      this.getAreaUserList("","","",temp_page);
    },
    search(){
      let  temp_search_company = this.search_str.id?this.search_str.id:"";
      let  temp_areaId = this.areas_item;
      let temp_searchValue = this.searchValue;
      this.getAreaUserList(temp_search_company,temp_searchValue,temp_areaId,"1");
    }
  },
  mounted() {
    let that =this;
    that.createMap();
  },
  created() {
    if (document.body.clientWidth < 1600) {
      this.small = true;
    }
    this.getAreaUserList("","","","1");
    this.areas =this.DSE.areaLists;
    this.tree = this.DSE.tree;
  }
};
</script>

<style lang="scss" scoped>
$base-font: 14px;
$weight: 600;
* {
  box-sizing: border-box;
}
#waterInformation {
  width: 100%;
  height: 100%;
  .top-tabs {
    width: 350px;
    height: 30px;
    position: absolute;
    top: 10px;
    right: 10px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    &.small {
      width: 240px;
    }
  }
  .search-table {
    position: absolute;
    right: 10px;
    top: 50px;
    height: calc(100% - 70px);
    margin-bottom: 20px;
    z-index: 100;
    background: #fff;
    .toggle-tab {
      position: absolute;
      top: 50%;
      left: -12px;
      width: 24px;
      height: 88px;
      border: 1px solid #ccccc8;
      // border-right: none;
      line-height: 86px;
      cursor: pointer;
      margin-top: -44px;
      margin-left: -12px;
      background: #fff;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      text-align: center;
    }
    .wrap-table {
      width: 350px;
      height: 100%;
      border: 1px solid #c2c2c2;
      &.small {
        width: 240px;
      }
      &.small .select-tabs > span {
        font-size: 12px;
        padding: 0 5px !important;
      }
      &.small .f-item {
        font-size: 12px;
        .el-select {
          width: 120px !important;
          margin-right: 10px;
        }
        .el-input {
          width: 120px !important;
        }
        .el-button {
          font-size: 12px;
        }
      }
      .wrap-search {
        width: 100%;
        // height: 100%;
        padding: 10px 10px;
        .searchObj {
          height: 30px;
          line-height: 30px;
          width: 100%;
          margin-bottom: 10px;
          display: flex;
          justify-content: space-between;
          & > span {
            display: inline-block;
            width: 75px;
          }
          .el-select {
            width: calc(100% - 80px);
          }
          #selectTree {
            width: calc(100% - 80px);
          }
        }
        .inner-select {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .row {
            width: 100%;
            .col {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 10px;
              &:last-child {
                margin-bottom: 0;
              }
              & > span {
                display: inline-block;
                width: 80px;
              }
              .el-select {
                width: calc(100% - 80px);
              }
              .el-input {
                width: calc(100% - 80px);
              }
            }
            &.first {
              width: calc(100% - 55px);
            }
            &.last {
              width: 50px;
            }
          }
        }
      }
      .contentLists {
        width: 100%;
        .content-item {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 12px;
          color: #333;
          border-bottom: 1px solid #ccc;
          & > div {
            text-align: center;
            line-height: 30px;
            .row {
              border-left: 1px solid #ccc;
              border-bottom: 1px solid #ccc;
              border-right: 1px solid #ccc;
              &:last-child {
                border-bottom: none;
              }
            }
            &.detail > div {
              // border-left: 1px solid #ccc;
              border-bottom: 1px solid #ccc;
              border-right: 1px solid #ccc;
              cursor: pointer;
              &:last-child {
                border-bottom: none;
              }
              span {
                display: inline-block;
                // border: 1px solid #ccc;
                border-radius: 5px;
                line-height: 20px;
                padding: 0 5px;
                color: #0a83fe;
              }
            }
            &.action {
              cursor: pointer;
              span {
                display: inline-block;
                // border: 1px solid #ccc;
                border-radius: 5px;
                line-height: 20px;
                padding: 0 5px;
                color: #0a83fe;
              }
            }
          }
          .item {
            width: 60px;
          }
          .userUnit {
            width: calc(100% - 180px);
            .row {
              width: 100%;
              padding: 0 10px;
              text-align: left;
              display: flex;
              align-items: center;
              position: relative;
              overflow-x: hidden;
              i {
                position: absolute;
                left: -12px;
                top: 10px;
                width: 12px;
                height: 12px;
                display: inline-block;
                // border: 1px solid #ccc;
                // margin-right: 10px;
                cursor: pointer;
                transition: all .5s linear;
                // &.ifDel {
                //   background: url("../../assets/images/pipeNet_manage/waterInformation/selected.png")
                //     no-repeat center center;
                //   background-size: cover;
                // }
              }
              &:hover{
                i{
                  left: 20px;
                }
              }
              .unitName {
                display: inline-block;
                margin-left: 30px;
                width: calc(100% - 40px);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
          &.top-head {
            font-weight: 600;
            background: #e2edef;
            & > div {
              & > div {
                border-right: 1px solid #ccc;
              }
              &:last-child > div {
                border-right: none;
              }
            }
          }
        }
      }

      &.samll .pages {
        font-size: 12px;
      }
      .pages {
        width: 100%;
        position: absolute;
        bottom: 10px;
        left: 0;
        height: 25px;
        line-height: 25px;
      }
    }
  }
}
</style>